<template>
  <h2>添加门店信息</h2>
  <table class="table-bordered" border="1">
    <tr>
      <td>门店名称:</td>
      <td>
        <input type="text" v-model="shop.shop_Name" />
      </td>
    </tr>
    <tr>
      <td>门店分店</td>
      <td>
        <input type="text" v-model="shop.shop_BranchName" />
      </td>
    </tr>
    <tr>
      <td>门店地址</td>
      <td>
        <input type="text" v-model="shop.shop_Address" />
      </td>
    </tr>
    <tr>
      <td>门店电话</td>
      <td>
        <input type="text" v-model="shop.shop_Phone" />
      </td>
    </tr>
    <tr>
      <td>门店状态</td>
      <td>
        <input
          type="radio"
          name="state"
          v-model="shop.shop_State"
          :value="true"
        />
        营业中
        <input
          type="radio"
          name="state"
          v-model="shop.shop_State"
          :value="false"
        />
        停业
      </td>
    </tr>
    <tr>
      <td>门店介绍</td>
      <td>
        <input type="text" v-model="shop.shop_Info" />
      </td>
    </tr>
    <tr>
      <td>入住须知</td>
      <td>
        <input type="text" v-model="shop.shop_Notice" />
      </td>
    </tr>
    <tr>
      <td>交通信息</td>
      <td>
        <input type="text" v-model="shop.shop_Tarffic" />
      </td>
    </tr>
    <tr>
      <td>门店图片</td>
      <td>
        <img style="width: 80px; height: 80px" :src="shop.shop_Img" />
        <input type="file" @change="FileUpLoads" />
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center">
        <input type="button" value="添加" @click="UpShop" />
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRoute, useRouter } from 'vue-router';

// 路由操作对象
const route = useRoute();

// 路由跳转对象
const router = useRouter();
//创建门店响应式数据
const shop = ref({
  shop_Id: 0,
  shop_Name: "",
  shop_BranchName: "",
  shop_Address: "",
  shop_Phone: "",
  shop_State: true,
  shop_Info: "",
  shop_Notice: "",
  shop_Tarffic: "",
  shop_Img: "",
});

onMounted(() => {
    UpSqlShop();
})

// 反填
const UpSqlShop = () => {
    axios.get('https://localhost:7071/api/Shop/UpSqlShop', {
        params: {
            sid:route.params.shopId
        }
    })
        .then(res => {
            shop.value = res.data
        })
    .catch(err => {
        console.log(err);
    })
 
}

//修改
const UpShop = () => {
  if (shop.value.shop_Name == "") {
    alert("请输入门店名称");
    return;
    };

    axios.put('https://localhost:7071/api/Shop/UpShop', shop.value)
        .then(res => {
            if (res.data > 0) {
                alert('门店信息修改成功');
                 router.push('/ShowShopView')
            }
           
        else{
            alert('门店信息修改失败')
        }
        })
    .catch(err => {
        console.log(err);
    })
};

// 创建文件上传响应式数据，并赋值为null(空)
const file = ref(null);

// 完成文件上传  any：任意类型
const FileUpLoads = (e: any) => {
  //   获取文件对象  提交将声明好的时间对象(e)中的target属性中的files属性进行获取
  file.value = e.target.files[0]; //获取文件对象
  if (!file.value) {
    alert("请选择一个文件上传");
    return;
  }
  // 创建FormData对象
  const formDate = new FormData();
  // 将文件信息保存到FormDate中
  // append：追加  通过键值对方式保存数据  键是唯一的   值是非唯一的

  // image 自启  file.value：文件对象
  formDate.append("image", file.value);

  // 发送请求
  axios.post("https://localhost:7071/api/Files/FileUpLoad", formDate)
    .then((res) => {
      shop.value.shop_Img = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
</style>